import clsx from 'clsx';
import { useEffect, useState } from 'react';

import Checkbox from '../../../components/Inputs/Checkbox';
import Select from '../../../components/Inputs/Select';
import { dynamicSort, seo } from '../../../helpers';
import LayoutBase from '../../../layouts/Base';
import { maps } from '../x4-helpers';
import './FactionRelations.scss';

interface FactionInterface {
  [key: string]: {
    shortname: string;
    isStoryLocked?: boolean;
    isNowIrrelevant?: boolean;
    relations: { [key: string]: number };
  };
}

const factionsInitialStandings: FactionInterface = {
  player: {
    shortname: 'PL',
    relations: {
      buccaneers: -15,
      criminal: -27,
      holyorderfanatic: -30,
      khaak: -30,
      scaleplate: -5,
      xenon: -30,
      fallensplit: -5,
      freesplit: -5,
      split: -15,
      terran: -15,
      yaki: -25,
      loanshark: -5,
    },
  },
  alliance: {
    shortname: 'ALI',
    relations: {
      antigone: 20,
      argon: 20,
      criminal: -27,
      hatikvah: 20,
      khaak: -30,
      ministry: 20,
      paranid: 28,
      smuggler: -18,
      teladi: 20,
      trinity: 28,
      xenon: -30,
      fallensplit: 10,
      pioneers: 20,
      terran: 20,
      yaki: -25,
      loanshark: 20,
      boron: 20,
    },
  },
  antigone: {
    shortname: 'ANT',
    relations: {
      alliance: 20,
      argon: 28,
      buccaneers: -15,
      criminal: -27,
      holyorder: -20,
      holyorderfanatic: -30,
      khaak: -30,
      scaleplate: -20,
      smuggler: -18,
      xenon: -30,
      court: -10,
      fallensplit: -20,
      freesplit: -10,
      split: -20,
      terran: -10,
      yaki: -25,
      loanshark: -15,
      boron: 15,
    },
  },
  argon: {
    shortname: 'ARG',
    relations: {
      alliance: 20,
      antigone: 28,
      buccaneers: -15,
      criminal: -27,
      holyorder: -20,
      holyorderfanatic: -30,
      khaak: -30,
      scaleplate: -25,
      smuggler: -18,
      teladi: 20,
      xenon: -30,
      court: -10,
      fallensplit: -25,
      freesplit: -10,
      split: -20,
      terran: -10,
      yaki: -25,
      loanshark: -15,
      boron: 27,
    },
  },
  buccaneers: {
    shortname: 'BUC',
    relations: {
      antigone: -15,
      argon: -15,
      criminal: -27,
      hatikvah: -15,
      holyorder: -15,
      holyorderfanatic: -25,
      khaak: -30,
      ministry: -15,
      paranid: -15,
      player: -15,
      scaleplate: -25,
      smuggler: -18,
      trinity: -15,
      xenon: -30,
      court: -15,
      fallensplit: -25,
      freesplit: -15,
      split: -15,
      pioneers: -15,
      terran: -15,
      yaki: -25,
      loanshark: -15,
      scavenger: -15,
    },
  },
  hatikvah: {
    shortname: 'HAT',
    relations: {
      alliance: 20,
      buccaneers: -15,
      criminal: -27,
      khaak: -30,
      smuggler: -18,
      xenon: -30,
      fallensplit: 10,
      yaki: -25,
    },
  },
  holyorder: {
    shortname: 'HOP',
    relations: {
      antigone: -20,
      argon: -20,
      buccaneers: -15,
      criminal: -27,
      khaak: -30,
      ministry: -20,
      paranid: -20,
      scaleplate: -25,
      smuggler: -18,
      teladi: -20,
      trinity: 30,
      xenon: -30,
      fallensplit: -25,
      terran: -10,
      yaki: -25,
      loanshark: -15,
      boron: -20,
    },
  },
  // holyorderfanatic: {
  //   shortname: 'HOF',
  //   relations: {
  //     antigone: -30,
  //     argon: -30,
  //     buccaneers: -25,
  //     khaak: -30,
  //     paranid: -30,
  //     player: -30,
  //     trinity: -30,
  //     xenon: -30,
  //     fallensplit: -20,
  //     pioneers: -30,
  //     terran: -30,
  //     yaki: -30,
  //     loanshark: -30,
  //     scavenger: -30,
  //     boron: -20,
  //   },
  // },
  khaak: {
    shortname: 'KHK',
    relations: {
      alliance: -30,
      antigone: -30,
      argon: -30,
      buccaneers: -30,
      civilian: -30,
      criminal: -30,
      hatikvah: -30,
      holyorder: -30,
      holyorderfanatic: -30,
      ministry: -30,
      paranid: -30,
      player: -30,
      scaleplate: -30,
      smuggler: -30,
      teladi: -30,
      trinity: -30,
      visitor: -30,
      xenon: -30,
      court: -30,
      fallensplit: -30,
      freesplit: -30,
      split: -30,
      pioneers: -30,
      terran: -30,
      yaki: -30,
      loanshark: -30,
      scavenger: -30,
      boron: -30,
    },
  },
  ministry: {
    shortname: 'MIN',
    relations: {
      alliance: 20,
      buccaneers: -15,
      criminal: -27,
      holyorder: -20,
      khaak: -30,
      scaleplate: -25,
      smuggler: -18,
      teladi: 28,
      xenon: -30,
      fallensplit: -25,
      terran: -10,
      yaki: -25,
      loanshark: -20,
      boron: 15,
    },
  },
  paranid: {
    shortname: 'PAR',
    relations: {
      alliance: 28,
      buccaneers: -15,
      criminal: -27,
      holyorder: -20,
      holyorderfanatic: -30,
      khaak: -30,
      scaleplate: -25,
      smuggler: -18,
      trinity: 30,
      xenon: -30,
      fallensplit: -25,
      terran: -10,
      yaki: -25,
      loanshark: -15,
    },
  },
  scaleplate: {
    shortname: 'SCA',
    relations: {
      antigone: -20,
      argon: -25,
      buccaneers: -25,
      criminal: -27,
      holyorder: -25,
      khaak: -30,
      ministry: -25,
      paranid: -25,
      player: -5,
      smuggler: -18,
      trinity: -25,
      xenon: -30,
      court: -25,
      fallensplit: 10,
      freesplit: -20,
      split: -25,
      pioneers: -25,
      terran: -25,
      yaki: -25,
      loanshark: -25,
      scavenger: -25,
      boron: -25,
    },
  },
  teladi: {
    shortname: 'TEL',
    relations: {
      alliance: 20,
      argon: 20,
      criminal: -27,
      holyorder: -20,
      khaak: -30,
      ministry: 28,
      smuggler: -18,
      xenon: -30,
      fallensplit: -20,
      yaki: -25,
      boron: 15,
    },
  },
  trinity: {
    shortname: 'TRI',
    relations: {
      alliance: 28,
      buccaneers: -15,
      criminal: -27,
      holyorder: 30,
      holyorderfanatic: -30,
      khaak: -30,
      paranid: 30,
      scaleplate: -25,
      smuggler: -18,
      xenon: -30,
      fallensplit: -25,
      terran: -10,
      yaki: -25,
      loanshark: -15,
    },
  },
  xenon: {
    shortname: 'XEN',
    relations: {
      alliance: -30,
      antigone: -30,
      argon: -30,
      buccaneers: -30,
      civilian: -30,
      criminal: -30,
      hatikvah: -30,
      holyorder: -30,
      holyorderfanatic: -30,
      khaak: -30,
      ministry: -30,
      paranid: -30,
      player: -30,
      scaleplate: -30,
      smuggler: -30,
      teladi: -30,
      trinity: -30,
      visitor: -30,
      court: -30,
      fallensplit: -30,
      freesplit: -30,
      split: -30,
      pioneers: -30,
      terran: -30,
      yaki: -10,
      loanshark: -30,
      scavenger: -30,
      boron: -30,
    },
  },
  court: {
    shortname: 'CUB',
    relations: {
      antigone: -10,
      argon: -10,
      buccaneers: -15,
      criminal: -27,
      fallensplit: -25,
      khaak: -30,
      scaleplate: -25,
      smuggler: -18,
      split: -20,
      xenon: -30,
      terran: -10,
      yaki: -25,
      loanshark: -15,
      boron: -15,
    },
  },
  fallensplit: {
    shortname: 'FAF',
    relations: {
      alliance: 10,
      antigone: -20,
      argon: -25,
      buccaneers: -25,
      court: -25,
      criminal: -27,
      freesplit: 20,
      hatikvah: 10,
      holyorder: -25,
      holyorderfanatic: -20,
      khaak: -30,
      ministry: -25,
      paranid: -25,
      player: -5,
      scaleplate: 10,
      smuggler: -18,
      split: -25,
      teladi: -20,
      trinity: -25,
      xenon: -30,
      pioneers: -25,
      terran: -25,
      yaki: -25,
      loanshark: -25,
      scavenger: -25,
      boron: -25,
    },
  },
  freesplit: {
    shortname: 'FRF',
    relations: {
      antigone: -10,
      argon: -10,
      buccaneers: -15,
      criminal: -27,
      fallensplit: 20,
      khaak: -30,
      player: -5,
      scaleplate: -20,
      xenon: -30,
      terran: -10,
      yaki: -25,
      loanshark: -15,
      boron: -20,
    },
  },
  split: {
    shortname: 'ZYA',
    relations: {
      antigone: -20,
      argon: -20,
      buccaneers: -15,
      court: -20,
      criminal: -27,
      fallensplit: -25,
      khaak: -30,
      player: -15,
      scaleplate: -25,
      xenon: -30,
      terran: -10,
      yaki: -25,
      loanshark: -15,
      boron: -25,
    },
  },
  pioneers: {
    shortname: 'PIO',
    relations: {
      alliance: 20,
      buccaneers: -15,
      criminal: -27,
      fallensplit: -25,
      holyorderfanatic: -30,
      khaak: -30,
      scaleplate: -25,
      smuggler: -18,
      terran: 20,
      xenon: -30,
      yaki: -10,
      loanshark: -15,
      boron: 15,
    },
  },
  terran: {
    shortname: 'TER',
    relations: {
      alliance: 20,
      antigone: -10,
      argon: -10,
      buccaneers: -15,
      court: -10,
      criminal: -27,
      fallensplit: -25,
      freesplit: -10,
      holyorder: -10,
      holyorderfanatic: -30,
      khaak: -30,
      ministry: -10,
      paranid: -10,
      pioneers: 20,
      player: -15,
      scaleplate: -25,
      smuggler: -18,
      split: -10,
      trinity: -10,
      xenon: -30,
      yaki: -30,
      loanshark: -10,
      scavenger: -10,
      boron: -15,
    },
  },
  yaki: {
    shortname: 'YAK',
    relations: {
      alliance: -25,
      antigone: -25,
      argon: -25,
      buccaneers: -25,
      court: -25,
      criminal: -27,
      fallensplit: -25,
      freesplit: -25,
      hatikvah: -25,
      holyorder: -25,
      holyorderfanatic: -30,
      khaak: -30,
      ministry: -25,
      paranid: -25,
      pioneers: -10,
      player: -25,
      scaleplate: -25,
      smuggler: -18,
      split: -25,
      teladi: -25,
      terran: -30,
      trinity: -25,
      xenon: -10,
      loanshark: -25,
      scavenger: -25,
      boron: -25,
    },
  },
  loanshark: {
    shortname: 'VIG',
    relations: {
      alliance: 20,
      antigone: -15,
      argon: -15,
      buccaneers: -15,
      civilian: 15,
      court: -15,
      criminal: -27,
      fallensplit: -25,
      freesplit: -15,
      holyorder: -15,
      holyorderfanatic: -30,
      khaak: -30,
      ministry: -20,
      paranid: -15,
      pioneers: -15,
      player: -5,
      scaleplate: -25,
      smuggler: -18,
      split: -15,
      terran: -10,
      trinity: -15,
      xenon: -30,
      yaki: -25,
      boron: -15,
    },
  },
  scavenger: {
    shortname: 'RIP',
    relations: {
      buccaneers: -15,
      criminal: -27,
      fallensplit: -25,
      holyorderfanatic: -30,
      khaak: -30,
      scaleplate: -25,
      smuggler: -18,
      terran: -10,
      xenon: -30,
      yaki: -25,
      boron: 15,
    },
  },
  boron: {
    shortname: 'BOR',
    relations: {
      alliance: 20,
      antigone: 15,
      argon: 27,
      court: -15,
      criminal: -27,
      fallensplit: -25,
      freesplit: -20,
      holyorder: -20,
      holyorderfanatic: -20,
      khaak: -30,
      loanshark: -15,
      ministry: 15,
      pioneers: 15,
      scaleplate: -25,
      scavenger: 15,
      smuggler: -18,
      split: -25,
      teladi: 15,
      terran: -15,
      xenon: -30,
      yaki: -25,
    },
  },
};

function X4FactionRelations() {
  const [factions, setFactions] = useState<FactionInterface>(JSON.parse(JSON.stringify(factionsInitialStandings)));
  const [factionKeysSorted, setFactionKeysSorted] = useState(
    Object.keys({ ...factions })
      .filter((factionKey) => factionKey !== 'player' && factionKey !== 'khaak' && factionKey !== 'xenon')
      .map((factionKey) => ({ key: factionKey, name: maps.factions[factionKey] }))
      .sort(dynamicSort('name'))
      .map((faction) => faction.key)
  );

  const [showSpoilers, setShowSpoilers] = useState(false);
  const [hideFactions, setHideFactions] = useState<string[]>([]);
  const [hidePirates, setHidePirates] = useState<string[]>([]);

  const [paranidSituation, setParanidSituation] = useState('nothing');
  const [yakiSituation, setYakiSituation] = useState('nothing');
  const [terranSituation, setTerranSituation] = useState('nothing');
  const [splitSituation, setSplitSituation] = useState('nothing');

  const [activeColumn, setActiveColumn] = useState<string | null>(null);

  useEffect(() => {
    const newStandings = { ...factions };
    newStandings.court.isStoryLocked = true;
    newStandings.trinity.isStoryLocked = true;
    newStandings.buccaneers.isStoryLocked = true;
    // newStandings.holyorderfanatic.isStoryLocked = true;
    setFactions(newStandings);

    seo({
      title: 'X4 Foundations Data And Knowledge',
      metaDescription:
        'X4 Foundations data and knowledge, faction relations and other general informations, includes Split' +
        ' Vendetta, Cradle  of Humanity, Tides of Avarice and Kingdom end.',
      keywords: factionKeysSorted,
    });
  }, []);

  useEffect(() => {
    if (hideFactions.length !== 0)
      setHideFactions(
        Object.keys({ ...factions })
          .filter((factionKey) => factions[factionKey].isStoryLocked)
          .map((factionKey) => factionKey)
      );
    else setHideFactions([]);
  }, [factions]);

  useEffect(() => {
    const newStandings = { ...factions };
    newStandings.holyorder.isNowIrrelevant = false;
    newStandings.paranid.isNowIrrelevant = false;

    newStandings.holyorder.relations.paranid = -20;
    newStandings.paranid.relations.holyorder = -20;

    // Trinity reset
    const relatedStoryFactionsUnified = ['antigone', 'split', 'argon', 'teladi', 'split', 'terran', 'boron'];
    relatedStoryFactionsUnified.forEach((factionKey) => {
      newStandings.trinity.relations[factionKey] = 0;
      newStandings[factionKey].relations.trinity = 0;
    });
    newStandings.trinity.relations.terran = -10;
    newStandings.terran.relations.trinity = -10;
    newStandings.trinity.isStoryLocked = true;

    // Buc reset
    const relatedStoryFactionsBuc = ['paranid', 'holyorder'];
    relatedStoryFactionsBuc.forEach((factionKey) => {
      newStandings.buccaneers.relations[factionKey] = -15;
      newStandings[factionKey].relations.buccaneers = -15;
    });
    newStandings.buccaneers.relations.teladi = -15;
    newStandings.teladi.relations.buccaneers = -15;
    newStandings.buccaneers.isStoryLocked = true;

    if (paranidSituation === 'cease_fire') {
      newStandings.holyorder.relations.paranid = -10;
      newStandings.paranid.relations.holyorder = -10;
    } else if (paranidSituation === 'station_built') {
      newStandings.holyorder.relations.paranid = 0;
      newStandings.paranid.relations.holyorder = 0;
    } else if (paranidSituation === 'unified') {
      newStandings.holyorder.relations.paranid = 0;
      newStandings.paranid.relations.holyorder = 0;
      newStandings.holyorder.isNowIrrelevant = true;
      newStandings.paranid.isNowIrrelevant = true;
      newStandings.trinity.isStoryLocked = false;
    } else if (paranidSituation === 'unified_war_option') {
      newStandings.holyorder.relations.paranid = 0;
      newStandings.paranid.relations.holyorder = 0;
      relatedStoryFactionsUnified.forEach((factionKey) => {
        newStandings.trinity.relations[factionKey] = -25;
        newStandings[factionKey].relations.trinity = -25;
      });
      newStandings.holyorder.isNowIrrelevant = true;
      newStandings.paranid.isNowIrrelevant = true;
      newStandings.trinity.isStoryLocked = false;
    } else if (paranidSituation === 'buc_station') {
      relatedStoryFactionsBuc.forEach((factionKey) => {
        newStandings.buccaneers.relations[factionKey] = -25;
        newStandings[factionKey].relations.buccaneers = -25;
      });
      newStandings.buccaneers.relations.teladi = 0;
      newStandings.teladi.relations.buccaneers = 0;
      newStandings.buccaneers.isStoryLocked = false;
    } else if (paranidSituation === 'buc_flagship') {
      relatedStoryFactionsBuc.forEach((factionKey) => {
        newStandings.buccaneers.relations[factionKey] = -30;
        newStandings[factionKey].relations.buccaneers = -30;
      });
      newStandings.paranid.relations.holyorder = -30;
      newStandings.holyorder.relations.paranid = -30;
      newStandings.buccaneers.relations.teladi = 0;
      newStandings.teladi.relations.buccaneers = 0;
      newStandings.buccaneers.isStoryLocked = false;
    }
    setFactions(newStandings);
  }, [paranidSituation]);

  useEffect(() => {
    const newStandings = { ...factions };
    const relatedStoryFactions = ['argon', 'antigone', 'teladi', 'ministry', 'split', 'freesplit', 'court'];

    relatedStoryFactions.forEach((factionKey) => {
      newStandings.yaki.relations[factionKey] = -25;
      newStandings[factionKey].relations.yaki = -25;
    });
    if (yakiSituation === 'yaki_finished')
      relatedStoryFactions.forEach((factionKey) => {
        newStandings.yaki.relations[factionKey] = 0;
        newStandings[factionKey].relations.yaki = 0;
      });

    setFactions(newStandings);
  }, [yakiSituation]);

  useEffect(() => {
    const newStandings = { ...factions };
    const relatedStoryFactions = ['argon', 'antigone', 'boron'];

    newStandings.antigone.relations.argon = 28;
    newStandings.argon.relations.antigone = 28;
    relatedStoryFactions.forEach((factionKey) => {
      newStandings.terran.relations[factionKey] = -10;
      newStandings[factionKey].relations.terran = -10;
    });
    newStandings.terran.relations.boron = -15;
    newStandings.boron.relations.terran = -15;

    if (terranSituation === 'conflict') {
      newStandings.antigone.relations.argon = 28;
      newStandings.argon.relations.antigone = 28;
      relatedStoryFactions.forEach((factionKey) => {
        newStandings.terran.relations[factionKey] = -20;
        newStandings[factionKey].relations.terran = -20;
      });
    } else if (terranSituation === 'schism') {
      newStandings.antigone.relations.argon = -15;
      newStandings.argon.relations.antigone = -15;
      relatedStoryFactions.forEach((factionKey) => {
        newStandings.terran.relations[factionKey] = -10;
        newStandings[factionKey].relations.terran = -10;
      });
      newStandings.terran.relations.boron = -15;
      newStandings.boron.relations.terran = -15;
    }

    setFactions(newStandings);
  }, [terranSituation]);

  useEffect(() => {
    const newStandings = { ...factions };
    newStandings.split.shortname = 'ZYA';
    newStandings.split.relations.buccaneers = -15;
    newStandings.split.relations.fallensplit = -25;
    newStandings.court.isStoryLocked = true;

    if (splitSituation === 'rha') {
      newStandings.split.shortname = 'RHA';
      newStandings.split.relations.buccaneers = 10;
      newStandings.split.relations.fallensplit = -20;
    } else if (splitSituation === 'curbs') {
      newStandings.court.isStoryLocked = false;
    }

    setFactions(newStandings);
  }, [splitSituation]);

  const RelationCell = ({
    source,
    target,
    relations,
    isStoryLockedSource,
    isStoryLockedTarget,
    originalStanding,
  }: {
    source: string;
    target: string;
    isStoryLockedSource?: boolean;
    isStoryLockedTarget?: boolean;
    relations: { [key: string]: number };
    originalStanding: number;
  }) => (
    <td
      className={clsx('x4-faction__cell', { 'x4-faction__cell--active': activeColumn === target })}
      onMouseEnter={() => setActiveColumn(target)}
      onMouseLeave={() => setActiveColumn(null)}
    >
      {relations[target] !== originalStanding && originalStanding && (
        <span
          className={clsx('x4-faction__relation x4-faction__relation--original', {
            'x4-faction__relation--superbad': originalStanding <= -25,
            'x4-faction__relation--bad': originalStanding > -25 && originalStanding <= -20,
            'x4-faction__relation--enemy': originalStanding > -20 && originalStanding < 0,
            'x4-faction__relation--neutral': originalStanding === 0,
            'x4-faction__relation--good': originalStanding > 10 && originalStanding <= 20,
            'x4-faction__relation--great': originalStanding > 20 && originalStanding <= 30,
          })}
        >
          {originalStanding || 0}
        </span>
      )}
      {source !== target && (
        <span
          className={clsx('x4-faction__relation', {
            'x4-faction__relation--superbad': relations[target] <= -25,
            'x4-faction__relation--bad': relations[target] > -25 && relations[target] <= -20,
            'x4-faction__relation--enemy': relations[target] > -20 && relations[target] < 0,
            'x4-faction__relation--neutral': relations[target] === 0 || !relations[target],
            'x4-faction__relation--good': relations[target] > 10 && relations[target] <= 20,
            'x4-faction__relation--great': relations[target] > 20 && relations[target] <= 30,
            'x4-faction__story-locked': isStoryLockedTarget || isStoryLockedSource,
          })}
        >
          {relations[target] || 0}
        </span>
      )}
    </td>
  );

  return (
    <LayoutBase title="X4 Faction Standings">
      <div>
        <p className="text--long">
          Good trading opportunities usually arise at the borders of factions that are in war. For one, there will be
          destruction and each ship lost is a ship that has to be rebuilt. No wars, no production, universe stockpiles
          rise until the economy is dead, everybody has everything. For seconds, factions in war don't trade between
          each other, so you might sell surpluses from one side to the other side.
        </p>

        <p className="text--long mt-1">
          Here is a list of starting relationships between factions. When given a choice in game during plotlines, it's
          in your best interest to make them dislike each other even more.
        </p>

        <div className="x4-faction__controls mt-1">
          <Checkbox
            label="Hide story locked factions"
            name="hide"
            checked={hideFactions.length !== 0}
            handleInputChange={() => {
              if (hideFactions.length === 0)
                setHideFactions(
                  Object.keys({ ...factions })
                    .filter((factionKey) => factions[factionKey].isStoryLocked)
                    .map((factionKey) => factionKey)
                );
              else setHideFactions([]);
            }}
          />
          <Checkbox
            label="Hide pirate factions"
            name="hide"
            checked={hidePirates.length !== 0}
            handleInputChange={() => {
              if (hidePirates.length === 0) setHidePirates(['yaki', 'scaleplate', 'fallensplit']);
              else setHidePirates([]);
            }}
          />
          {showSpoilers ? (
            <>
              <br />
              <Select
                value={paranidSituation}
                options={[
                  { value: 'nothing', label: 'Paranid plot not started' },
                  { value: 'cease_fire', label: 'Unification: Cease Fire' },
                  { value: 'station_built', label: 'Unification: Built Trinity station' },
                  { value: 'unified', label: 'Unification: Completed unification' },
                  { value: 'unified_war_option', label: 'Unification: Trinity declares war to everybody' },
                  { value: 'buc_station', label: 'Escalation: Built Dukes station' },
                  { value: 'buc_flagship', label: 'Escalation: Built Dukes flagship' },
                ]}
                name="paranidSituation"
                handleInputChange={(e) => setParanidSituation(e.target.value)}
              />
              <Select
                value={yakiSituation}
                options={[
                  { value: 'nothing', label: 'Yaki plot not started' },
                  { value: 'yaki_finished', label: 'Yaki saved: Yaki survived and amplifier destroyed' },
                ]}
                name="yakiSituation"
                handleInputChange={(e) => setYakiSituation(e.target.value)}
              />
              <Select
                value={terranSituation}
                options={[
                  { value: 'nothing', label: 'Terran plot not started' },
                  { value: 'status_quo', label: 'Status Quo: Destroyed documents' },
                  { value: 'conflict', label: 'Terran Conflict: Informed ARG/ANT about operation' },
                  { value: 'schism', label: 'Schism: Completed plot for Terrans' },
                ]}
                name="terranSituation"
                handleInputChange={(e) => setTerranSituation(e.target.value)}
              />
              <Select
                value={splitSituation}
                options={[
                  { value: 'nothing', label: 'Split plot not started' },
                  { value: 'rha', label: 'Patriarchy: Exposed and sabotaged Curbs' },
                  { value: 'curbs', label: 'Curbs: Support Curbs' },
                ]}
                name="splitSituation"
                handleInputChange={(e) => setSplitSituation(e.target.value)}
              />
            </>
          ) : (
            <Checkbox
              label="Show possible state changes (spoiler alert)"
              name="spoilers"
              checked={showSpoilers}
              handleInputChange={() => setShowSpoilers(true)}
            />
          )}
        </div>

        <div className="x4-faction">
          <table>
            <thead>
              <tr>
                <th>Factions</th>
                {factionKeysSorted
                  .filter(
                    (factionKey) =>
                      !hideFactions.includes(factionKey) &&
                      !hidePirates.includes(factionKey) &&
                      !factions[factionKey].isNowIrrelevant
                  )
                  .map((factionKey) => (
                    <th key={factionKey} className={clsx({ 'x4-faction__cell--active': activeColumn === factionKey })}>
                      {factions[factionKey].shortname}
                    </th>
                  ))}
              </tr>
            </thead>
            <tbody>
              {factionKeysSorted
                .filter(
                  (factionKey) =>
                    !hideFactions.includes(factionKey) &&
                    !hidePirates.includes(factionKey) &&
                    !factions[factionKey].isNowIrrelevant
                )
                .map((factionKey) => (
                  <tr key={factionKey}>
                    <td className="text--smaller">
                      <span className="text--bold text--xs">{factions[factionKey].shortname}</span> -{' '}
                      {factions[factionKey].shortname !== 'RHA' ? maps.factions[factionKey] : 'Patriarch Rhak'}
                    </td>
                    {factionKeysSorted
                      .filter(
                        (factionKey) =>
                          !hideFactions.includes(factionKey) &&
                          !hidePirates.includes(factionKey) &&
                          !factions[factionKey].isNowIrrelevant
                      )
                      .map((factionKeyTarget) => (
                        <RelationCell
                          key={`${factionKey} ${factionKeyTarget}`}
                          source={factionKey}
                          relations={factions[factionKey].relations}
                          target={factionKeyTarget}
                          isStoryLockedSource={factions[factionKey].isStoryLocked}
                          isStoryLockedTarget={factions[factionKeyTarget].isStoryLocked}
                          originalStanding={factionsInitialStandings[factionKey].relations[factionKeyTarget]}
                        />
                      ))}
                  </tr>
                ))}
            </tbody>
          </table>
        </div>
        <div className="x4-faction__relation-legend mt-1">
          <span className="x4-faction__relation x4-faction__relation--superbad">Total war</span>{' '}
          <span className="x4-faction__relation x4-faction__relation--bad">Military war</span>{' '}
          <span className="x4-faction__relation x4-faction__relation--enemy">No trading</span>
        </div>
      </div>
    </LayoutBase>
  );
}

export default X4FactionRelations;
